<template>
  <div>
    <a-input @click="openModal" readonly :value="orderFieldNames"/>
    <FieldOrderConfigModal @ok="handleOK" :form-definition="formDefinition" ref="FieldOrderConfigModal"/>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import FieldOrderConfigModal from '@/components/hhd/design/FormMenu/FieldOrderConfigModal.vue';

export default {
  name: 'FieldOrderConfig',
  components: {FieldOrderConfigModal},
  model: createModelForVue('orderFields'),
  props: {
    orderFields: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    openModal() {
      this.$refs.FieldOrderConfigModal.open(this.orderFields);
    },
    handleOK(orderFields) {
      this.$emit('change', orderFields);
    },
  },
  computed: {
    orderFieldNames() {
      let fields = this.formDefinition.fields || [];
      let orderFields = this.orderFields || [];

      return orderFields.map(o => {
        let field = fields.find(f => f.id === o.fieldId);
        return `${field.label} ${o.orderByType === 'desc' ? '↓' : "↑"}`;
      }).toString();
    },
  }
};
</script>